<template>
    <div>
        <h2>新增门店</h2>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>门店名称</td>
                    <td><input type="text" v-model="a.ShopName" /></td>
                </tr>
                <tr>
                    <td>分店名称</td>
                    <td><input type="text" v-model="a.BranchName" /></td>
                </tr>
                <tr>
                    <td>门店图片</td>
                    <td><input type="file" @change="imgs" />
                    <img :src="a.Phote" width="200"v-if="a.Phote!=''"></td>
                </tr>
                <tr>
                    <td>开业时间</td>
                    <td><input type="date" v-model="a.BeginTime" /></td>
                </tr>
                <tr>
                    <td>门店状态</td>
                    <td><input type="radio" name="state" v-model="a.State" :value="1" />开业
                        <input type="radio" name="state" v-model="a.State" :value="0" />倒闭
                    </td>
                </tr>
                <tr>
                    <td>门店特色</td>
                    <td><input type="checkbox" name="tese" v-model="a.Feature" value="办葬礼" />办葬礼
                        <input type="checkbox" name="tese" v-model="a.Feature" value="降学宴" />降学宴
                        <input type="checkbox" name="tese" v-model="a.Feature" value="拆校庆祝" />拆校庆祝
                        <input type="checkbox" name="tese" v-model="a.Feature" value="鸿门宴" />鸿门宴
                    </td>
                </tr>
                <tr>
                    <td>门店介绍</td>
                    <td><textarea cols="50" rows="5" v-model="a.Desc"></textarea></td>
                </tr>
                <tr>
                    <td>门店位置</td>
                    <td><select v-model="a.AddressId">
                            <option value="">请选择</option>
                            <option :value="item.Id" v-for="item in data.list">{{ item.Name }}</option>
                        </select></td>
                </tr>
                <tr>

                    <td>门店类型</td>
                    <td><select v-model="a.ShopType">
                            <option value="">请选择</option>
                            <option :value="1">普通酒店</option>
                            <option :value="2">三星酒店</option>
                            <option :value="3">五星酒店</option>
                            <option :value="4">电竟酒店</option>
                            <option :value="5">商务酒店</option>
                            <option :value="6">民宿酒店</option>
                        </select></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="button" value="增加" @click="add"></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';
import moment from 'moment';
const router = useRouter();
const route = useRoute();
//1.读取门店地址2.图片上传
onMounted(() => {
    getShopAddress();
})
let a: any = reactive({
    ShopName: '',
    BranchName: '',
    Phote: '',
    BeginTime: '',
    State: 1,
    Feature: [],
    Desc: '',
    AddressId: '',
    ShopType: ''
})

let data: any = reactive({
    list: [],
})





const imgs = (e: any) => {
    //e事件对象
    //将上传的文件转成formdata格式
    let obj = e.target.files[0];
    let f = new FormData();
    f.append('file', obj);
    axios({
        url: '/api/Imgs/UpImg',
        method: 'post',
        data:f
    })
        .then((res) => {
            console.log(res)
            if(res.data=="图片格式错误")
            {
                alert("上传的不是图片");
                return;
            }
            if(res.data=="大于2M了")
            {
                alert("上传图片不是2M");
                return;
            }
            a.Phote=res.data

        })
        .catch((err) => {
            console.log(err);
        })
}

const getShopAddress = () => {
    axios({
        url: "/api/Shop/GetShopAddressList",
        method: 'get'
    })
        .then((res) => {
            console.log(res)
            data.list = res.data
        })
}

const add = () => {
    if(a.ShopName=="")
    {
        alert("门店名称不能为空");
        return;
    }
    let reg=/^[\u4e00-\u9fa5]{1,20}$/
    if(!reg.test(a.ShopName))
    {
        alert("只能为1-20的汉字")
        return;
    }
    if(a.BranchName=="")
    {
        alert("分店名称不能为空");
        return;
    }
    if(a.state==='')
    {
        alert("状态不能为空");
        return;
    }
    if(a.Feature.length==0){
        alert("门店特色必选");
        return;
    }
    a.Feature=a.Feature.toString();
    axios({
        url: '/api/Shop/AddShop',
        method: 'post',
        data: a
    })
    .then((res) => {
            console.log(res)
            if(res.data==-1)
            {
                alert("名称重复");
                return;
            }
            if(res.data>0)
            {
                alert("添加成功");
                router.push("/shoplist");
            }

        })
        .catch((err) => {
            console.log(err);
        })
}


</script>

<style scoped></style>